<template>
  <div class="content">
    <!--费用项目列表弹窗-->
    <el-dialog
      v-dialogDrag
      :title="$t('market.expenseite')"
      model
      :visible.sync="isCurrencyDialog"
      :close-on-click-modal="false"
      width="60%"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <span class="materiel-code">{{ $t('market.typename') }}<!--币别名称--></span>
        <el-input v-model.trim="currency.fname" class="input-width" size="mini" keyup.enter.native="currencySearch" />
        <el-button size="mini" type="primary" @click="currencySearch">{{ $t('btn.search') }}</el-button>
      </div>
      <jc-table
        :table-data="currencyDialogData"
        :table-header="currencyDialogHeader"
        table-height="53vh"
        serial
        @clickRow="currencySelectRow"
      />
      <jc-pagination
        v-show="currency.total > 0"
        :total="currency.total"
        :page.sync="currency.pageNum"
        :limit.sync="currency.pageSize"
        @pagination="queryTBdCurrency"
      />
    </el-dialog>
  </div>
</template>
<script>
import { queryTFinPayableFyxmList } from '@/api/financial/cashier'

export default {
  data() {
    return {
      // 结算币别
      isCurrencyDialog: true,
      currency: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 200, // 每页显示多少条数据
        fname: ''
      },
      currencyDialogData: [],
      currencyDialogHeader: [
        { label: this.$t('market.typenumber'), prop: 'fbillno' },
        { label: this.$t('market.typename'), prop: 'fname' }
      ]
    }
  },
  created() {
    this.queryTBdCurrency()
  },
  methods: {
    // 查询结算币别
    async queryTBdCurrency() {
      this.isCurrencyDialog = true
      const DATA = this.currency
      const { data: RES } = await queryTFinPayableFyxmList(DATA)
      this.currencyDialogData = RES.array
      this.currency.total = RES.total
    },
    currencySearch() {
      this.currency.pageNum = 1
      this.queryTBdCurrency()
    },
    // 选择结算货币
    currencySelectRow(item) {
      this.$emit('fyxm', item)
    },
    // 关闭前回调
    handleClose() {
      this.$emit('fyxm')
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  @include listBom;
}
</style>

